<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="zh-CN"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="renderer" content="webkit">
    <title>水磨效果展示页</title>
    <style type="text/css">
        body{color:#222;-webkit-text-size-adjust:none;}
        body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl, dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,iframe{margin:0; padding:0;}
        h1,h2,h3,h4,h5,h6{font-size:100%;}
        body,button,input,select,textarea {font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;font-size:62.5%; line-height:1.5;}
        ol,ul{list-style:none;}
        
        html,body{ width:100%; height:100%; overflow:hidden;}
        .section-wrap{ width:100%;height:100%;overflow:visible;transition:transform 1s cubic-bezier(0.86,0,0.03,1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);}
        .section-wrap .section{ position:relative; width:100%; height:100%; background-position:center center; background-repeat:no-repeat;}
        .section-wrap .section .title{width:100%;position:absolute;top:10%;color:#fff;font-size:2.4em;text-align:center;}
        .section-wrap .section .title p{ padding:0 4%;opacity:0}
        .section-wrap .section .title.active .tit{ opacity:1;transform:translateY(-25px);-webkit-transform:translateY(-25px);transition:all 2s cubic-bezier(0.86,0,0.8,1);-webkit-transition:all 2s cubic-bezier(0.86,0,0.8,1);}
        .section-wrap .section .content{width:100%;position:absolute;top:30%;color:#eee;font-size:2.0em;text-align:center;padding: 8px;}
        .section-wrap .section-1{ background-color:#337ab7}
        .section-wrap .section-2{ background-color:#5cb85c}
        .section-wrap .section-3{ background-color:#5bc0de}
        .section-wrap .section-4{ background-color:#f0ad4e}
        .section-wrap .section-5{ background-color:#d9534f}
        .put-section-0{ transform:translateY(0);-webkit-transform:translateY(0);}
        .put-section-1{ transform:translateY(-100%);-webkit-transform:translateY(-100%);}
        .put-section-2{ transform:translateY(-200%);-webkit-transform:translateY(-200%);}
        .put-section-3{ transform:translateY(-300%);-webkit-transform:translateY(-300%);}
        .put-section-4{ transform:translateY(-400%);-webkit-transform:translateY(-400%);}
        .section-btn{ width:14px;position:fixed;right:4%;top:50%;}
        .section-btn li{ width:14px;height:14px;cursor:pointer;text-indent:-9999px;border-radius:50%;-webkit-border-radius:50%;margin-bottom:12px; background:#BD362F;text-align:center; color:#fff; onsor:pointer;}
        .section-btn li.on{ background:#fff}
        .arrow{ opacity:1;animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;-webkit-animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;transform:rotate(-90deg);-webkit-transform:rotate(-90deg); position:absolute;bottom:10px;left:50%;margin-left:-30px;width:60px;height:60px;border-radius:100%;-webkit-border-radius:100%;line-height:60px;text-align:center;font-size:20px;color:#fff;border:1px solid #fff;cursor:pointer;overflow:hidden;}
        .arrow:hover{ animation-play-state:paused;-webkit-animation-play-state:paused;}
        @keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }
        @-webkit-keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }
    </style>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <!--[if lte IE 8]>
    <style type="text/css">
        html,body{width:100%; height:100%; overflow:scroll}
        .section-btn{display:none;}
    </style>
    <![endif]-->
</head>
<body>
<body>
        <!--[if lt IE 7]>
            <p class="chromeframe">请使用IE7以上浏览器浏览本网站</p>
        <![endif]-->
    <section class="section-wrap">
        <div class="section section-5">
            <div class="title">
                <p class="tit">O2O平台门槛很高吗？</p>
            </div>
            <div class="title"></div>
            <div class="content">
                <p>我们帮你在最短的时间内完成第一笔订单</p>
                <div>
                    <div class="col-xs-4">
                    <div class="circle" style="background:#167E33">
                        <span class="glyphicon glyphicon-bullhorn glyphicon－lg"><br>
                        注册试用
                    </span></div>
                    </div>
                    <div class="col-xs-4">
                    <div class="circle" style="background:#ff8000">
                        <span class="glyphicon glyphicon-bullhorn glyphicon－lg"><br>
                        界面定制
                    </span></div>
                    </div>
                    <div class="col-xs-4">
                    <div class="circle" style="">
                        <span class="glyphicon glyphicon-bullhorn glyphicon－lg"><br>
                        上线
                    </span></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section section-1">
            <div class="title active">
                <p class="tit">不懂技术也能O2O?</p>
            </div>
            <div class="content">创业的初期你最需要关心的是你的商业模式是否正确，技术的事情交给我们吧！</div>
        </div>
        <div class="section section-2">
            <div class="title">
                <p class="tit">启动资金有限？</p>
            </div>
            <div class="content">我们采用灵活的SAAS计费模式，最低只需199/月。</div>
        </div>
        <div class="section section-3">
            <div class="title">
                <p class="tit">商业模式不明朗？</p>
            </div>
            <div class="content">我们的平台只需最小的开发量就可以完成一次迭代。</div>
        </div>
        <div class="section section-4">
            <div class="title">
                <p class="tit">希望自己掌控数据</p>
            </div>
            <div class="content">对于成熟的平台我们支持升级到私有云部署方式。</div>
        </div>
        
    </section>
    <ul class="section-btn">
      <li class="on"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="arrow">&laquo;</div>


<script src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<script type="text/javascript">
    
    
    $(function(){
        var i=0;
        var $btn = $('.section-btn li'),
            $wrap = $('.section-wrap'),
            $arrow = $('.arrow');
        
        /*当前页面赋值*/
        function up(){i++;if(i==$btn.length){i=0};}
        function down(){i--;if(i<0){i=$btn.length-1};}
        
        /*页面滑动*/
        function run(){
            $btn.eq(i).addClass('on').siblings().removeClass('on'); 
            $wrap.attr("class","section-wrap").addClass(function() { return "put-section-"+i; }).find('.section').eq(i).find('.title').addClass('active');
        };
        
        /*右侧按钮点击*/
        $btn.each(function(index) {
            $(this).click(function(){
                i=index;
                run();
            })
        });
        
        /*翻页按钮点击*/
        $arrow.one('click',go);
        function go(){
            up();run(); 
            setTimeout(function(){$arrow.one('click',go)},1000)
        };
        
        /*响应鼠标*/
        $wrap.one('mousewheel',mouse_);
        function mouse_(event){
            if(event.deltaY<0) {up()}
            else{down()}
            run();
            setTimeout(function(){$wrap.one('mousewheel',mouse_)},1000)
        };
        
        /*响应键盘上下键*/
        $(document).one('keydown',k);
        function k(event){
            var e=event||window.event;
            var key=e.keyCode||e.which||e.charCode;
            switch(key) {
                case 38: down();run();  
                break;
                case 40: up();run();    
                break;
            };
            setTimeout(function(){$(document).one('keydown',k)},1000);
        }
    });
</script>

</body>
</html>
